<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国传统节日文化传承</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary-color: #d32f2f;
            --secondary-color: #f9a825;
            --dark-color: #333;
            --light-color: #f8f8f8;
            --accent-color: #0288d1;
            --transition: all 0.3s ease;
        }
        
        body {
            background: linear-gradient(135deg, #fff5f5, #f0f8ff);
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
            margin-right: 15px;
        }
        
        .logo h1 {
            color: white;
            font-size: 1.8rem;
            letter-spacing: 1px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 1.5rem;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            padding: 8px 15px;
            border-radius: 30px;
            transition: var(--transition);
        }
        
        nav ul li a:hover, 
        nav ul li a.active {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        /* Banner区域 */
        .banner {
            position: relative;
            height: 500px;
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .slides {
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.8s ease;
        }
        
        .slide {
            width: 25%;
            height: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
            text-align: center;
            padding: 0 10%;
        }
        
        .slide h2 {
            font-size: 3rem;
            margin-bottom: 20px;
            animation: fadeInDown 1s ease;
        }
        
        .slide p {
            font-size: 1.2rem;
            max-width: 700px;
            animation: fadeInUp 1s ease;
        }
        
        .slide:nth-child(1) { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://img95.699pic.com/photo/40188/7370.jpg_wh860.jpg') no-repeat center/cover; }
        .slide:nth-child(2) { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://img95.699pic.com/photo/50025/0176.jpg_wh860.jpg') no-repeat center/cover; }
        .slide:nth-child(3) { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://bpic.588ku.com/back_pic/06/15/65/31628b96bacc0d8.jpg') no-repeat center/cover; }
        .slide:nth-child(4) { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://img95.699pic.com/photo/40159/5136.jpg_wh860.jpg') no-repeat center/cover; }
        
        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        
        .controls button {
            background: rgba(255, 255, 255, 0.5);
            border: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 8px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .controls button.active {
            background: white;
            transform: scale(1.3);
        }
        
        /* 公告区域 */
        .announcement {
            background: var(--light-color);
            padding: 25px 10%;
            margin: 0 5% 40px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-left: 5px solid var(--primary-color);
        }
        
        .announcement h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .announcement h3 i {
            margin-right: 10px;
        }
        
        .announcement-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .announcement-content p {
            flex: 3;
            font-size: 1.1rem;
        }
        
        .btn {
            background: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
            flex: 1;
            text-align: center;
            max-width: 200px;
            margin-left: 20px;
        }
        
        .btn:hover {
            background: #b71c1c;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(211, 47, 47, 0.4);
        }
        
        /* 主体内容区域 */
        .main-content {
            padding: 0 5%;
        }
        
        .section-title {
            text-align: center;
            margin: 40px 0;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            display: inline-block;
            padding: 0 20px;
            background: white;
            position: relative;
            z-index: 2;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            z-index: 1;
        }
        
        .festivals {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .festival-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
        }
        
        .festival-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .festival-img {
            height: 200px;
            overflow: hidden;
        }
        
        .festival-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .festival-card:hover .festival-img img {
            transform: scale(1.1);
        }
        
        .festival-content {
            padding: 25px;
        }
        
        .festival-content h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
            font-size: 1.5rem;
        }
        
        .festival-content p {
            margin-bottom: 20px;
            color: #555;
        }
        
        .festival-content .date {
            color: var(--accent-color);
            font-weight: 500;
            display: block;
            margin-bottom: 15px;
        }
        
        .read-more {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .read-more i {
            margin-left: 5px;
            transition: var(--transition);
        }
        
        .read-more:hover i {
            transform: translateX(5px);
        }
        
        /* 表单区域 */
        .form-section {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-bottom: 50px;
        }
        
        .form-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .form-info {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 10px;
            padding: 30px;
            color: white;
        }
        
        .form-info h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }
        
        .form-info p {
            margin-bottom: 15px;
        }
        
        .form-info ul {
            list-style: none;
            margin-top: 20px;
        }
        
        .form-info ul li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .form-info ul li i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--accent-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.2);
        }
        
        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .submit-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 14px 30px;
            font-size: 1.1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
            font-weight: 600;
        }
        
        .submit-btn:hover {
            background: #b71c1c;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(211, 47, 47, 0.4);
        }
        
        /* 页脚样式 */
        footer {
            background: linear-gradient(90deg, var(--dark-color), #222);
            color: white;
            padding: 50px 5% 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.4rem;
            margin-bottom: 20px;
            color: var(--secondary-color);
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--secondary-color);
        }
        
        .footer-column p {
            margin-bottom: 15px;
            color: #bbb;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 12px;
        }
        
        .footer-column ul li a {
            color: #bbb;
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        
        .footer-column ul li a:hover {
            color: var(--secondary-color);
            transform: translateX(5px);
        }
        
        .footer-column ul li a i {
            margin-right: 10px;
        }
        
        .social-icons {
            display: flex;
            margin-top: 20px;
        }
        
        .social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            margin-right: 10px;
            color: white;
            transition: var(--transition);
        }
        
        .social-icons a:hover {
            background: var(--primary-color);
            transform: translateY(-5px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 0.9rem;
        }
        
        .student-info {
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
        }
        
        .student-info p {
            margin: 5px 0;
            color: var(--secondary-color);
            font-weight: 500;
        }
        
        /* 动画效果 */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .form-container {
                grid-template-columns: 1fr;
            }
            
            .announcement-content {
                flex-direction: column;
                text-align: center;
            }
            
            .btn {
                margin: 20px 0 0;
            }
        }
        
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            nav ul li {
                margin: 5px;
            }
            
            .slide h2 {
                font-size: 2rem;
            }
            
            .slide p {
                font-size: 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .banner {
                height: 400px;
            }
            
            .festivals {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 头部和导航 -->
    <header>
        <div class="logo">
            <img src="" alt="中国传统节日Logo">
            <h1>中国传统节日文化传承</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">节日介绍</a></li>
                <li><a href="#">文化习俗</a></li>
                <li><a href="#">传统美食</a></li>
                <li><a href="#">活动报名</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- Banner和轮播图 -->
    <section class="banner">
        <div class="slides">
            <div class="slide">
                <h2>传承中华文化 弘扬民族精神</h2>
                <p>中国传统节日是中华文明的瑰宝，承载着丰富的历史文化内涵，是中华民族文化认同的重要载体。</p>
            </div>
            <div class="slide">
                <h2>春节 - 辞旧迎新</h2>
                <p>中国最重要的传统节日，象征团圆和新的开始，贴春联、放鞭炮、吃年夜饭等习俗传承千年。</p>
            </div>
            <div class="slide">
                <h2>端午节 - 纪念屈原</h2>
                <p>赛龙舟、吃粽子，传承爱国精神，已被列入世界非物质文化遗产名录。</p>
            </div>
            <div class="slide">
                <h2>中秋节 - 月圆人团圆</h2>
                <p>赏明月、吃月饼，寄托人们对团圆和美好生活的向往，是家庭团聚的重要时刻。</p>
            </div>
        </div>
        <div class="controls">
            <button class="active"></button>
            <button></button>
            <button></button>
            <button></button>
        </div>
    </section>

    <!-- 公告区域 -->
    <section class="announcement">
        <h3><i class="fas fa-bullhorn"></i> 最新公告</h3>
        <div class="announcement-content">
            <p>【文化传承活动】本周末将在文化中心举办"传统节日手工艺体验活动"，欢迎广大市民报名参与，共同体验传统文化的魅力！</p>
            <a href="#" class="btn">立即报名</a>
        </div>
    </section>

    <!-- 主体内容区域 -->
    <main class="main-content">
        <div class="section-title">
            <h2>传统节日介绍</h2>
        </div>
        
        <div class="festivals">
            <div class="festival-card">
                <div class="festival-img">
                    <img src="https://img95.699pic.com/photo/40188/7370.jpg_wh860.jpg" alt="春节">
                </div>
                <div class="festival-content">
                    <span class="date">农历正月初一</span>
                    <h3>春节</h3>
                    <p>春节是中国最重要的传统节日，象征着辞旧迎新、团圆和希望。习俗包括贴春联、放鞭炮、吃年夜饭、拜年等，是家庭团聚的重要时刻。</p>
                    <a href="#" class="read-more">了解更多 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <div class="festival-card">
                <div class="festival-img">
                    <img src="https://img95.699pic.com/photo/50025/0176.jpg_wh860.jpg" alt="元宵节">
                </div>
                <div class="festival-content">
                    <span class="date">农历正月十五</span>
                    <h3>元宵节</h3>
                    <p>元宵节又称灯节，是春节后的第一个重要节日。人们赏花灯、吃元宵、猜灯谜，象征着团圆和美满，也是中国情人节的传统。</p>
                    <a href="#" class="read-more">了解更多 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <div class="festival-card">
                <div class="festival-img">
                    <img src="https://bpic.588ku.com/back_pic/06/15/65/31628b96bacc0d8.jpg" alt="端午节">
                </div>
                <div class="festival-content">
                    <span class="date">农历五月初五</span>
                    <h3>端午节</h3>
                    <p>端午节是为了纪念爱国诗人屈原，有赛龙舟、吃粽子的习俗。这个节日已被列入联合国教科文组织人类非物质文化遗产名录。</p>
                    <a href="#" class="read-more">了解更多 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <div class="festival-card">
                <div class="festival-img">
                    <img src="https://img95.699pic.com/photo/40159/5136.jpg_wh860.jpg" alt="中秋节">
                </div>
                <div class="festival-content">
                    <span class="date">农历八月十五</span>
                    <h3>中秋节</h3>
                    <p>中秋节是团圆之夜，人们赏明月、吃月饼，寄托对亲人的思念和对美好生活的向往。传统习俗还有祭月、赏桂花等。</p>
                    <a href="#" class="read-more">了解更多 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
        
        <div class="section-title">
            <h2>文化传承活动报名</h2>
        </div>
        
        <div class="form-section">
            <div class="form-container">
                <div class="form-info">
                    <h3>参与文化传承</h3>
                    <p>加入我们的传统节日文化体验活动，一起学习和传承中华民族的宝贵文化遗产。</p>
                    <p>活动内容包括：</p>
                    <ul>
                        <li><i class="fas fa-check-circle"></i> 传统节日习俗讲解</li>
                        <li><i class="fas fa-check-circle"></i> 手工艺品制作体验</li>
                        <li><i class="fas fa-check-circle"></i> 传统美食制作教学</li>
                        <li><i class="fas fa-check-circle"></i> 民俗表演欣赏</li>
                        <li><i class="fas fa-check-circle"></i> 文化传承专家讲座</li>
                    </ul>
                </div>
                
                <form class="form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" placeholder="请输入您的姓名" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="tel" id="phone" placeholder="请输入您的手机号码" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" placeholder="请输入您的电子邮箱" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="activity">选择活动</label>
                        <select id="activity" required>
                            <option value="">请选择活动</option>
                            <option value="1">端午节香包制作</option>
                            <option value="2">中秋月饼DIY</option>
                            <option value="3">春节剪纸艺术</option>
                            <option value="4">元宵灯笼制作</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" placeholder="请留下您的需求或问题"></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn">提交报名</button>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚区域 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <p>中国传统节日文化传承中心致力于保护、研究和推广中国传统节日文化，让更多人了解和传承中华民族的文化瑰宝。</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                </div>
            </div>
            
            <div class="footer-column">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 首页</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 节日介绍</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 文化习俗</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 传统美食</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 活动报名</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>联系我们</h3>
                <ul>
                    <li><a href="#"><i class="fas fa-map-marker-alt"></i> 北京市朝阳区文化路88号</a></li>
                    <li><a href="tel:010-12345678"><i class="fas fa-phone"></i> 010-12345678</a></li>
                    <li><a href="mailto:info@chinesefestival.com"><i class="fas fa-envelope"></i> info@chinesefestival.com</a></li>
                    <li><a href="#"><i class="fas fa-clock"></i> 周一至周五: 9:00 - 18:00</a></li>
                </ul>
            </div>
        </div>
        
        <div class="copyright">
            <p>© 2025 中国传统节日文化传承中心. 保留所有权利</p>
            <div class="student-info">
                <p>姓名：赵平</p>
                <p>学号：2410250259</p>
                <p>专业：软件工程</p>
            </div>
        </div>
    </footer>

    <script>
        // 轮播图功能
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelector('.slides');
            const buttons = document.querySelectorAll('.controls button');
            let currentSlide = 0;
            const slideCount = document.querySelectorAll('.slide').length;
            let slideInterval;
            
            // 切换幻灯片
            function goToSlide(index) {
                slides.style.transform = `translateX(-${index * 25}%)`;
                
                // 更新按钮状态
                buttons.forEach(btn => btn.classList.remove('active'));
                buttons[index].classList.add('active');
                
                currentSlide = index;
            }
            
            // 自动播放
            function startSlideShow() {
                slideInterval = setInterval(() => {
                    currentSlide = (currentSlide + 1) % slideCount;
                    goToSlide(currentSlide);
                }, 5000);
            }
            
            // 为控制按钮添加点击事件
            buttons.forEach((button, index) => {
                button.addEventListener('click', () => {
                    clearInterval(slideInterval);
                    goToSlide(index);
                    startSlideShow();
                });
            });
            
            // 表单提交处理
            const form = document.querySelector('.form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                alert('报名信息已提交！我们将尽快与您联系。');
                form.reset();
            });
            
            // 初始化轮播
            startSlideShow();
        });
    </script>
</body>
</html>